<template>
  <div>
    <template v-for="(item,index) in menuList">
      <div :key="index" style="text-align:center;">

        <Dropdown v-if="item.children.length!==1" :key="index" class="my" placement="right-start"
                  transfer transfer-class-name="my" @on-click="changeMenu">
          <Button class="my" type="text">

            <i :class="['fa','fa-fw',item.icon]"></i>
          </Button>
          <DropdownMenu slot="list" class="my" style="width:200px;">
            <template v-for="(child,i) in item.children">
              <DropdownItem :key="i" :name="child.name">

                <i :class="['fa','fa-fw',child.icon]"></i>
                <span style="padding-left:10px;">{{ child.meta.title }}</span>
              </DropdownItem>
            </template>
          </DropdownMenu>
        </Dropdown>

        <Dropdown v-else :key="index" class="my" placement="right-start" style="left:100px;"
                  transfer transfer-class-name="my" @on-click="changeMenu">
          <Button class="my" type="text" @click="changeMenu(item.children[0].name)">

            <i :class="['fa','fa-fw',item.icon]"></i>
          </Button>
          <DropdownMenu slot="list" class="my" style="width:200px;">
            <DropdownItem key="'d' + index" :name="item.children[0].name">

              <i :class="['fa','fa-fw',item.icon]"></i>
              <span style="padding-left:10px;">{{ item.children[0].meta.title }}</span>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Emit} from 'vue-property-decorator';
import AppBase from '@/lib/abpbase';

@Component({})
export default class SidebarMenuShrink extends AppBase {
  name: string = 'SidebarMenuShrink';

  @Prop({type: Array}) menuList: any[];
  @Prop({type: String, default: '#fff'}) iconColor: string;
  @Prop({type: String, default: 'dark'}) menuTheme: string;

  @Emit('on-change')
  changeMenu(active: string) {

  }
}
</script>

<style lang="less" scoped>
@import '../styles/shrinkable-menu.less';

.ivu-dropdown.my:hover {
  .ivu-btn {
    background-color: #101117;

    i {
      color: #fff;
    }
  }
}

.ivu-btn.ivu-btn-text.my {
  width: 80px;
  border-radius: 0;
  height: 40px;
  background-color: #191a23;
  display: inline-block;

  i {
    color: rgba(255, 255, 255, 0.7);;
    transition: color 0.4s;
  }
}

.ivu-dropdown-menu.my {
  i {
    color: rgba(255, 255, 255, 0.7);;
    transition: color 0.4s;
  }

  span {
    color: rgba(255, 255, 255, 0.7);;
    transition: color 0.4s;
  }

  li:hover {
    background-color: #101117;

    i {
      color: #fff;
    }

    span {
      color: #fff;
    }
  }
}

</style>
<style lang="less">
/* ::v-deep无法穿透？ */
.ivu-select-dropdown.my {
  background-color: #191a23;
  margin: 0 2px;
  max-height: 400px;
}
</style>
